<template>
  <el-dialog
    title="报名"
    :visible.sync="showReserve"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    width="700px"
    class="dialog-reserve"
  >
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" label="约球/拼场名称" prop="name" min-width="180" show-overflow-tooltip />
      <el-table-column align="center" label="活动项目" prop="projectName" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" label="报名费(元)" prop="price" min-width="100" show-overflow-tooltip />
      <el-table-column align="center" label="活动时间" min-width="200" prop="acTime" show-overflow-tooltip />
    </el-table>
    <div class="zbt"><span class="secondColor">*</span>客户信息：</div>
    <div class="memberFlex">
      <MemberSearch ref="memberSearch" type="20" class="search" @clear="memberClear" @select="memberSelect" />
      <el-button class="ml10" :type="userType == 0?'':'primary'" @click="skBtn">散客</el-button>
    </div>
    <div v-if="userType == 0 && members && members.nickName" class="member">
      <div>姓名：{{ members.nickName }}</div>
      <div>手机号：{{ members.phone }}</div>
      <!-- <div>会员等级：{{ members.cardName }}</div> -->
      <div>充值余额：<span>{{ members.rechargeMoney|| members.remainingMoney || 0 }}</span></div>
      <div>赠送余额：<span>{{ members.giveMoney || members.remainingGiveMoney || 0 }}</span></div>
    </div>
    <div v-if="userType == 1" class="skCnt">
      <el-input v-model="userName" placeholder="请输入散客姓名" :maxlength="20" style="width: 39%;margin-right: 2%" />
      <el-input v-model="userPhone" :maxlength="11" placeholder="请输入散客手机号" style="width: 59%; " />
    </div>
    <div class="bzbt">备注：</div>
    <el-input v-model="remarks" type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" placeholder="请输入备注内容" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="showReserve = false">取消</el-button>
      <el-button v-preventReClick type="primary" @click="clickReserveForm">去支付</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { enrollJointSite } from '@/api'
import MemberSearch from '@/components/MemberSearch'
import store from '@/store'
export default {
  components: {
    MemberSearch
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      editPd: false,
      showReserve: false,
      list: [],
      zprice: '',
      typeList: ['会员登记', '散客登记'],
      userType: 0,
      cardNum: '',
      status: '',
      members: {},
      userName: '',
      userPhone: '',
      remarks: '',
      detail: {}
    }
  },
  methods: {
    open(detail) {
      this.showReserve = true
      this.detail = detail
      this.list = [detail]
      this.members = {}
      this.remarks = ''
      this.userPhone = ''
      this.userName = ''
      this.cardNum = ''
      this.userType = 0
      this.$nextTick(() => {
        this.$refs.memberSearch.clearSearch()
      })
    },
    skBtn() {
      this.userType = 1
      this.members = {}
      this.$refs.memberSearch.clearSearch()
    },
    memberSelect(item) {
      this.members = item
      this.cardNum = item.number
      this.userType = 0
    },
    memberClear() {
      this.members = {}
      this.cardNum = ''
    },
    clickReserveForm() {
      if ((this.userType === 0 && !this.members) || (this.userType === 0 && !this.cardNum)) {
        this.$message.info('请输人卡号/手机号')
        return
      }
      enrollJointSite({
        param: {
          channelType: '02',
          userType: this.userType,
          id: this.detail.id,
          memberId: this.members.id,
          remarks: this.remarks,
          userName: this.userName || '散客',
          userPhone: this.userPhone
        }
      }).then(res => {
        if (res.errorCode === '000000') {
          // this.$message.success('报名成功')
          this.showReserve = false
          this.$emit('paymentShow', {
            detail: [this.detail],
            userType: this.userType,
            allPrice: this.detail.price,
            orderId: res.record.orderId,
            memberId: Number(this.userType) === 0 ? this.members.id : ''
          })
          this.members = ''
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.zbt {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 16px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.memberFlex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .search {
    flex: 1;
  }
}

.member {
  width: 100%;
  background: #F7F7F7;
  margin-top: -10px;
  border-radius: 2px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  div {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    width: 33.33%;
    line-height: 1.5;

    &:nth-of-type(4),
    &:nth-of-type(5) {
      margin-top: 5px;
    }

    span {
      color: $SecondColor;
    }
  }
}

.skCnt {
  margin-top: -10px;
  display: flex;
  margin-bottom: 20px;
}

.bzbt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  line-height: 14px;
  margin-bottom: 15px;
}

.dialog-footer {
  position: relative;

  .reserve-money {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    position: absolute;
    left: 0;

    b {
      color: $SecondColor;
      font-size: 20px;
      margin-right: 4px;
    }
  }
}
</style>
